<template>
	<page-meta :page-style="'overflow:' + (show ? 'hidden' : 'visible')"></page-meta>
	<view>
		<ksp-cropper mode="fixed" width="1000" height="200" :url="fileUrl" @cancel="oncancel"
			@ok="onok"></ksp-cropper>
		<view class="gaps">
			
		</view>
		<view class="sq-panel">
			<view class="panel-tip">
				店铺抽奖跳转图片
			</view>
			<view class="panel-body">
				<template v-if="lotteryUrl">
					<view class="bg-images-area">
						<image class="bg-image" :src="lotteryUrl" mode="widthFix" @click="changeLotteryUrl(lotteryUrl)">
						</image>
					</view>
				</template>
				<template v-else>
					<text @click="changeLotteryUrl('')">点击添加</text>
				</template>
			</view>
		</view>
		
		<view class="gaps">
			
		</view>
		
		<view class="sq-panel">
			<view class="panel-tip">
				店铺抽奖广告
			</view>
			<view class="panel-body">
				<uni-file-picker title="图片" ref="adFiles" limit="9" file-mediatype="image" mode="grid"
					@select="detailSelectImage" :value="ads" @delete="delImage"></uni-file-picker>
				<u-button type="success" @click="upload" text="保存"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
import {
	getShopAds,
	addShopAd,
	deleteShopAd,
	getShopLotteryUrl,
	saveShopLotteryUrl
} from '@/api/shops/shopAd/shopAd'
import uploadFile from '@/utils/uploadFile.js'
export default {
	data() {
		return {
			ads: [],
			delAds: [],
			addAds: [],
			lotteryUrl:'',
			fileUrl:'',
			filePath:'',
		}
	},
	onLoad(options) {
		this.shopId = options.shopId
		this.init()
	},
	methods: {
		init() {
			getShopAds().then((res) => {
				this.ads = res.map(item => {
					const url = item.adUrl;
					return {
						"id": item.id,
						"name": url.slice(url.lastIndexOf('/') + 1),
						"extname": url.slice(url.lastIndexOf('.') + 1),
						"url": url,
						"up": false
					}
				})
			})
			getShopLotteryUrl().then((res) => {
				this.lotteryUrl = res.lotteryUrl || ''
			})
		},

		detailSelectImage(e) {
			this.ads.push(...e.tempFiles.map(({
				name,
				extname,
				url
			}) => ({
				name,
				extname,
				url,
				up: true
			})));
		},
		delImage(e) {
			let ad = this.ads.filter(item => {
				return item.name === e.tempFile.name
			})
			this.delAds.push(...ad)
			this.ads = this.ads.filter(item => {
				return item.name !== e.tempFile.name
			})
		},
		changeLotteryUrl() {
			uni.chooseImage({
				count: 1,
				success: (res) => {
					this.fileUrl = res.tempFilePaths[0];
				}
			})
		},
		oncancel() {
			this.fileUrl = ''
		},
		async onok(ev) {
			this.fileUrl = ''
			uni.showLoading({
				title: '上传中',
				mask: true
			})
			let res = await uploadFile(ev.path, `${this.shopId}/logo/`)
			saveShopLotteryUrl({
				shopId: this.shopId,
				lotteryUrl: res.fileUrl
			}).then((r) => {
				this.lotteryUrl = res.fileUrl
				uni.hideLoading()
			})
		},
		upload() {
			let _this = this
			let upPromise = this.ads.map(item => {
				if (item.up) {
					return uploadFile(item.url,
						`shopAds/${this.shopId}/`).then(
							url => {
								_this.addAds.push(url.fileUrl)
							})
				}
			})
			let tdelids = _this.delAds.map(item => {
				return item.id
			})
			if (tdelids.length > 0) {
				upPromise.push(deleteShopAd({ ids: tdelids }))
			}
			
			Promise.all(upPromise).then(res => {
				uni.showLoading({
					title: '正在保存信息',
					mask: true
				})
				if(this.addAds.length) { 
					addShopAd({ urls: this.addAds }).then((r) => {
						uni.hideLoading()
						uni.showToast({
							title: '保存成功'
						})
						this.addAds = []
						this.delAds = []
					})
				} else {
					uni.showToast({
						title: '保存成功'
					})
					uni.hideLoading()
				}
				
			})
		}
	}
}
</script>

<style lang="scss">
	.bg-images-area {
		display: flex;
		flex-direction: column;
	
	}
	
	.bg-image {
		// width: 400px;
		// height: 100px;
		margin-bottom: 10px;
	}
	
</style>